// css-in-js技术来定义样式，使用了style-components库完成此项技术
// style-components库，在通过es6字符串模板定义css样式的，定义好的样式，它会当作一个样式组件，在ui组件中调用
import styled from 'styled-components'

// 定义一个标题的样式 当作一个组件调用
// styled.html标签 => 组件编译后，生成对于html代码,`es6字符串模板 -- 写样式`
export const H3Style = styled.h3`
  color: red;
  span:nth-of-type(2) {
    color: blue;
    background: yellow;
  }
`

export const Btn = styled.button`
  height: 50px;
  line-height: 50px;
  font-size: 14px;
`
// 此前的样式组件继承了 Btn 样式组件中的样式
export const BtnDanger = styled(Btn)`
  color: red;
`

// 属性传递
export const BodyContainer = styled.div`
  color: ${props => props.color || '#000'};
  font-size: ${({ fontSize = 14 }) => fontSize}px;
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 60px;
  margin-top: 10px;
`
